<template>
	<view class="">
		<view v-if="i == 0" class=" colllect_item u-flex-col u-padding-bottom-30 u-margin-left-30 u-margin-right-30 u-margin-top-15 u-margin-bottom-25"
			@click="goto_details(item)"
			:id="'colllect'+item.id" v-for="(item , index) in colllect_list" :key='index'>
			<u-image :src="item.img" height="350" :lazy-load="true" :fade="true" duration="300" mode='aspectFill'>
				<u-loading slot="loading"></u-loading>
			</u-image>
			<view class="u-padding-top-15 u-padding-left-25 u-padding-right-25">
				<view class="">
					<u-tag v-for="(ite,ind) in item.keywords_arr" :key='ind' :text="ite" class="u-margin-right-10" 
						mode="light" type='info' size='mini' />
				</view>
			</view>

			<text
				class="u-padding-left-25 u-padding-right-25 u-padding-bottom-20 u-padding-top-20 u-font-33 u-main-color">{{item.house_name}}</text>

			<text class="u-padding-left-25 u-padding-right-25 u-font-26">{{item.description}}</text>
		</view>
		
		<view v-if="i == 1" class=" colllect_item u-flex-col u-padding-bottom-30 u-margin-left-30 u-margin-right-30 u-margin-top-15 u-margin-bottom-25"
			@click="goto_details_2(item)"
			:id="'colllect'+item.id" v-for="(item , index) in colllect_list" :key='index'>
			<u-image :src="item.picture" height="350" :lazy-load="true" :fade="true" duration="300" mode='aspectFill'>
				<u-loading slot="loading"></u-loading>
			</u-image>
			<view class="u-flex-col u-padding-top-15 u-padding-left-25 u-padding-right-25">
				<text class="strategy_title">{{item.strategy_title}}</text>
				<view class="u-fle u-margin-top-15">
					<text class="click_num ">点击数：{{item.click_num}}</text>
					<!-- <text class="click_num ">点击数：{{item.click_num}}</text> -->
				</view>
				<!-- <view class="">
					<u-tag v-for="(ite,ind) in item.keywords_arr" :key='ind' :text="ite" class="u-margin-right-10"
						mode="light" type='info' size='mini' />
				</view> -->
			</view>
		
			<text
				class="u-padding-left-25 u-padding-right-25 u-padding-bottom-20 u-padding-top-20 u-font-33 u-main-color">{{item.house_name}}</text>
		
			<text class="u-padding-left-25 u-padding-right-25 u-font-26">{{item.description}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Item',
		data() {
			return {

			}
		},
		methods:{
			goto_details_2(item){
				this.$u.route({
					url: 'pages/article/index',
					params: {
						id: item.id,
					}
				})
			} ,
			goto_details(item) {
				this.$u.route({
					url: 'pages/roomDetails/index',
					params: {
						id: item.id,
					}
				})
			},
		},
		props: {
			i: { // 当前tab的下标 
				type: Number,
				default () {
					return 0
				}
			},
			colllect_list: {
				type: Array,
				default: () => []
			}
		}
	}
</script>

<style lang='scss' scoped>
	.strategy_title{
		font-weight: 700;
		font-size: 32rpx;
	}
	.colllect_item {
		box-shadow: 0rpx 0rpx 14rpx 0rpx #999;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.search-item {
		background-color: #FFFFFF;
		box-shadow: 0rpx 1rpx 13rpx 13rpx #ddd;
		border-radius: 10rpx;
		overflow: hidden;
	}
	
	.search-item-first {
		padding-top: 120rpx;
	}
	
	.searchBar-box {
		width: 750rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		z-index: 999;
	}
	
	.searchBar-input-placeholder {
		text-align: right;
	}
</style>
